<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步请求</title>
    <style>
        .container {
            margin: 0 auto;
            width: 400px;
        }
        #box{
            position: relative;
        }

        #box > div{
            position: absolute;
        }

        #box > .question{
            right: 0;
        }
    </style>
</head>
<body>
<!-- div 块元素
    默认宽度为父元素宽度的 100%
 -->
<div class="container">

    <div id="box"></div>
    <input type="text" id="message"/>
    <button id="btn">发送</button>
</div>


<script>
    // 1. 获取按钮元素
    // let btn = document.getElementById("btn");
    let btn = document.querySelector("#btn");
    let box = document.querySelector("#box");
    let message = document.querySelector("#message");

    // 2. 注册点击事件
    btn.onclick = function(){
        // 获取输入框的值
        let msg = message.value;
        // 显示到消息列表中
        // 修改元素内容
        box.innerHTML = box.innerHTML + "<div class='question'>Q：" + msg + "</div><br/>";
        box.innerHTML = box.innerHTML + "<div class='answer'>A：答案是xxxxx</div><br/>";


        // // 发送异步请求
        // fetch("/send", // 请求地址
        //     {
        //     method: "post", // 请求方式
        //     headers:{
        //         contentType: 'application/json' // 数据格式
        //     },
        //     body: "vbiljhgjbjojhbn" // 发送的数据
        // }).then( (res) => { // 响应的处理
        //     // 响应的文本内容传递到下一步
        //    return res.text();
        // }).then((text) => {
        //     // 显示 响应文本
        //     alert(text);
        // })
    }

    // 定义 show 函数
    function show(){
        alert("hello javascript");
    }
</script>
</body>
</html>